<script setup>
import {onMounted, ref} from "vue";
import {createPolicy, deletePolicy, listPolicy} from "../../../http/rabbitmq/policy.js";
import {manageStore, rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";
import {listExchangeBinding, listExchangeByVhost} from "../../../http/rabbitmq/exchange.js";
import {listQueueByVhost} from "../../../http/rabbitmq/queue.js";

const vhostList = ref([])
const vhostExchangeList = ref([])
const vhostExchangeQueueList = ref([])

const policyTableData = ref([])
const policyDefinitionDate = ref({})

const policyForm = ref({
  "vhost": "",
  "name": "",
  "pattern": "",
  "apply-to": "all",
  "priority": 0,
  "definition": {}
})
const showPolicyForm = ref(false)
const policyUpdate = ref(false)

function showPolicyCreate() {
  showPolicyForm.value = true
  policyUpdate.value = false
}

function handlePolicySave() {
  handlePolicyCreate()
}

function handlePolicyCreate() {
  createPolicy(policyForm.value).then(response => {
    handlePolicyList()
    policyForm.value = {
      "vhost": "",
      "name": "",
      "pattern": "",
      "apply-to": "all",
      "priority": 0,
      "definition": {}
    }
    vhostExchangeList.value = []
    vhostExchangeQueueList.value = []
    policyDefinitionDate.value = {}
    showPolicyForm.value = false
  })
}

function handlePolicyDelete(row) {
  deletePolicy(row).then(response => {
    handlePolicyList()
    showPolicyForm.value = false
  })
}

function handlePolicyList() {
  listPolicy().then(response => {
    policyTableData.value = response
  })
}

function addPriorityDefinition(policy) {
  policyDefinitionDate.value[policy.name] = policy
}

function removePriorityDefinition(key) {
  delete (policyDefinitionDate.value[key])
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

function handleVhostExchangeList(vhost) {
  listExchangeByVhost(vhost).then(response => {
    vhostExchangeList.value = response
    policyForm.value.definition['dead-letter-exchange'] = null
  })
}

function handleVhostExchangeQueueList(vhost, name) {
  listExchangeBinding(vhost, name).then(response => {
    vhostExchangeQueueList.value = response
  })
}

onMounted(() => {
  handlePolicyList()
  handleVhostList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePolicyList">Search</el-button>
          <el-button type="primary" @click="showPolicyCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="policyTableData" border style="width: 100%;">
      <el-table-column prop="vhost" label="vhost" width="70"/>
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/policy-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">
            {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="pattern" label="pattern" width="80"/>
      <el-table-column prop="apply-to" label="apply-to" width="100"/>
      <el-table-column prop="priority" label="priority" width="100"/>
      <el-table-column prop="definition" label="definition" width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-tooltip placement="left-start">
            <template #content>
              <div v-for="(value, key) in scope.row.definition">
                {{ key }} : {{ value }}
              </div>
            </template>
            <el-tag type="primary">args</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handlePolicyDelete(scope.row)"
              :title="'是否删除Policy [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="policy manage" v-model="showPolicyForm" :close-on-click-modal="false" label-width="160px"
             fullscreen>
    <el-row>
      <el-col :span="12">
        <el-form ref="form" :model="policyForm" label-width="160px">
          <el-form-item label="Virtual host">
            <el-select v-model="policyForm.vhost" @change="handleVhostExchangeList(policyForm.vhost)">
              <el-option
                  v-for="item in vhostList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="policyForm.name"></el-input>
          </el-form-item>
          <el-form-item label="pattern">
            <el-input v-model="policyForm.pattern"></el-input>
          </el-form-item>
          <el-form-item label="apply-to">
            <el-select v-model="policyForm['apply-to']">
              <el-option
                  v-for="item in rabbitmqStore().applyToType"
                  :key="item.ukId"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="priority">
            <el-input v-model="policyForm.priority"></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="8">
            Queues [All types]
          </el-col>
          <el-col :span="16">
            <el-button @click="addPriorityDefinition(policy)" v-for="policy in rabbitmqStore().policyAllType">
              {{ policy.name }}
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" v-for="(value, key) in policyDefinitionDate" :model="policyForm.definition"
                 label-width="300px" :inline="true">
          <el-form-item v-if="key === 'dead-letter-exchange'" :label="key">
            <el-select v-model="policyForm.definition[key]" style="min-width: 170px"
                       @change="handleVhostExchangeQueueList(policyForm.vhost, policyForm.definition[key])">
              <el-option
                  v-for="item in vhostExchangeList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else-if="key === 'dead-letter-routing-key'" :label="key">
            <el-select v-model="policyForm.definition[key]" style="min-width: 170px">
              <el-option
                  v-for="item in vhostExchangeQueueList"
                  :key="item.destination"
                  :label="item.routing_key"
                  :value="item.routing_key">
                <span style="width: 100px; float: left">{{ item.routing_key }}</span>
                <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
                  {{ item.destination_type }} : {{ item.destination }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else-if="value.type === 'number'" :label="key">
            <el-input v-model.number="policyForm.definition[key]"
                      :type="value.type"></el-input>
          </el-form-item>
          <el-form-item v-else="value.type === 'text'" :label="key">
            <el-input v-model="policyForm.definition[key]" :type="value.type"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="removePriorityDefinition(key)">删除</el-button>
          </el-form-item>
        </el-form>
        <el-form ref="form" :model="policyForm.definition" label-width="160px">
          <el-form-item>
            <el-button type="primary" @click="handlePolicySave">Save</el-button>
            <el-button @click="showPolicyForm = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<style scoped>

</style>